<template>
	<view>
		<view class="food-img-view">
			<image class="food-img" :src="food_img"></image>
		</view>
		<view class="pl">
			<view class="food-name">{{ food_name }}</view>
		</view>
		<view class="comment-start">全部评价</view>
		<!-- 评价 -->
		<view v-if="commentList.length <= 0" class="comment">暂无评论，期待您的用餐评论</view>
		<view class="comment" v-for="comment in commentList" :key="comment.comment_id">
			<view class="user">
				<image class="portrait-img" :src="comment.user_portrait"></image>
				<view class="info">
					<view class="nickname">{{ comment.user_nickname }}</view>
					<view>
						<image v-for="item in comment.score" :key="item" 
							class="score-star" src="/static/image/star-active.png"></image>
					</view>
				</view>
				<view class="time">2021.08.17</view>
			</view>
			<view class="content">{{ comment.content }}</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				food_id: 0,
				food_name: '',
				food_img: '',
				commentList: []
			}
		},
		onLoad(args) {
			if (!args.id || !args.img || !args.name) {
				uni.showToast({
					'title': '参数错误',
					'icon': 'none'
				})
				uni.navigateBack({})
			}
			this.food_id = args.id;
			this.food_name = args.name;
			this.food_img = args.img;
			this.getCommentList()
		},
		methods: {
			getCommentList() {
				uni.request({
					url: 'https://restaurant.lgdweb.com/api/comment/index/food_id/'+ this.food_id,
					success: res => {
						this.commentList = res.data.data.commentList
					},
					fail: err => {
						console.log(err)
					}
				});
			}
		}
	}
</script>

<style>
	.food-img-view {
		width: 100%;
		height: 480rpx;
		background-color: white;
		display: flex;
		justify-content: center;
	}
	.food-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.pl {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.food-name {
		font-size: 36rpx;
		color: #F37B1D;
		margin-left: 36rpx;
		font-weight: bold;
	}

	.comment-start {
		font-size: 32rpx;
		margin-top: 20rpx;
		padding: 16rpx 32rpx;
		background-color: white;
		font-weight: bold;
	}

	.comment {
		/* height: 300rpx; */
		background-color: white;
		padding: 16rpx 32rpx 26rpx 32rpx;
	}

	.user {
		display: flex;
		align-items: center;
	}

	.portrait-img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.nickname {
		font-weight: bold;
		margin-bottom: 6rpx;
	}

	.score-star {
		width: 32rpx;
		height: 32rpx;
	}

	.time {
		flex: 1;
		text-align: right;
		color: #84aba5;
		font-size: 26rpx;
	}
	.content {
		margin: 4rpx 0 0 110rpx;
	}
</style>
